<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>历史沿革</title>
    <link rel="stylesheet" href="../css/all.css" />

    <style>
      .box-container {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100vh;
        background-image: url("../img/bac1.png");
        background-size: cover;
      }

      li::marker {
        display: none;
      }
      li {
        list-style-type: none;
      }
      .header {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 10;
        justify-content: space-around;
        /* background-color: #008c8c; */
      }
      .header-left {
        display: flex;
        width: 80%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        background-image: url("../img/introduce/zuzi.png");
        background-size: 30% 100%;
        background-position: 0%;
        background-repeat: no-repeat;
        padding-left: 30px;
        z-index: 3;
      }
      .logo {
        background-image: url("../img/introduce/logo.png");
        background-size: 198% 360%;
        background-repeat: no-repeat;
        width: 60px;
        height: 55px;
        background-position: 50% 70%;
        cursor: pointer;
        /* background-color: aqua; */
      }
      /* 头部 */
      .title {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 3.3em;
        font-family: font3;
        color: #789a89;
        padding-left: 14px;
        z-index: 1;
      }
      .header-right {
        display: flex;
        width: 18%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 23px;
      }
      .header-right > ul {
        display: flex;
        height: 10%;
        width: 15%;
        list-style-type: none;
      }
      .header-right > ul > li {
        position: relative;
        font-family: font3;
        height: auto;
        transition: all 0.5s ease;
        font-size: 2.3em;
        font-weight: bold;
        padding-left: 24px;
        color: #8f3536;
        cursor: pointer;
      }
      .header-right > ul > li.active {
        color: #83a795;
      }
      .header-right > ul > li > a {
        text-decoration: none; /* 取消下划线 */
        color: inherit; /* 继承父元素的文字颜色 */
        cursor: pointer; /* 鼠标悬停时显示手型 */
      }
      .header-right > ul > li:hover {
        transition: all 0.5s ease;
        color: #83a795;
      }
      .header-right > ul > li:not(:first-child)::after {
        content: "";
        width: 4px;
        height: 50px;
        left: 7px;
        position: absolute;
        top: 15px;
        background-color: #8f3536;
      }
      .main {
        display: flex;
        height: 80%;
        width: 100%;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* background-color: #789a89; */
        transition: all 0.2s ease;
        align-items: center;
      }

      /* 轮播开始 */
      /* 旋转木马开始 */
      .shell {
        position: relative;
        width: 60vw;
        height: 40vw;
        max-width: 300px;
        max-height: 250px;
        margin: 0;
        color: white;
        perspective: 1000px;
        transform: translateY(-40%);
        transform-origin: center;
      }
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: translateZ(-30vw) rotateY(1);
        /* animation:  carroteto 9s infinite ; */
        transition: transform 0.5s ease;
        /* cubic-bezier(0.77, 0, 0.175, 1) forwards;  */
      }
      .item {
        position: absolute;
        width: 60vw;
        height: 40vw;
        max-width: 271px;
        max-height: 266px;

        border-radius: 50%;
        background-size: cover;
        -webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
        opacity: 1;
        perspective: 1000px;
      }
      .item:nth-child(1) {
        transform: rotateY(0) translateZ(25vw);
      }
      .item:nth-child(2) {
        transform: rotateY(52deg) translateZ(25vw);
      }
      .item:nth-child(3) {
        transform: rotateY(104deg) translateZ(25vw);
      }
      .item:nth-child(4) {
        transform: rotateY(156deg) translateZ(25vw);
      }
      .item:nth-child(5) {
        transform: rotateY(207deg) translateZ(25vw);
      }
      .item:nth-child(6) {
        transform: rotateY(259deg) translateZ(25vw);
      }
      .item:nth-child(7) {
        transform: rotateY(308deg) translateZ(25vw);
      }
      .item:nth-child(8) {
        transform: rotateY(362deg) translateZ(25vw);
      }
      .item:nth-child(9) {
        transform: rotateY(413deg) translateZ(25vw);
      }
      .item.deActive {
        transition: all 0.8s ease;
        opacity: 0;
      }

      /* @keyframes carroteto {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(360deg);
        }
      } */

      /* 旋转木马结束 */

      /* 翻转卡片开始 */

      .cardbox {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        border-radius: 50%;
        transition: transform 0.8s;
        transform-style: preserve-3d;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        /* background-color: violet; */
      }

      .item:hover .cardbox {
        transform: rotateY(180deg);
      }
      .item .cardbox {
        /* transform: rotateY(180deg); */
      }

      .cardfont,
      .cardbac {
        box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* 这里这里 */
        border: 1px solid #f9cd09;
        border-radius: 50%;
      }

      .cardbac {
        box-shadow: none;
        transform: rotateY(180deg) translateX(25%) translateY(-10%); /* 翻转回去 */
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 0;
        width: 200%;
        height: 130%;
        align-items: flex-start;
        /* 这里这里 */
        /* border: 1px solid coral; */
        border: none;
        /* background-image: url(../img/bac2.jpg); */
        background-position: 53% -60%;
        background-size: contain cover;
        z-index: 4;
      }

      .cardbac > span > span {
        display: flex;
        /* float: right; */
        position: absolute;
        width: 30%;
        height: 60%;
        writing-mode: vertical-rl;
        text-orientation: upright;
        text-align: left;
        top: 25%;
        font-size: 0.8em;
        letter-spacing: 0.03em;
        line-height: 0.85em;
        right: -18%;
        /* white-space: pre; */
        color: #824239;
      }

      .cardfont {
        background-color: antiquewhite;

        background-repeat: no-repeat;
        background-size: 300%;
        background-position: 50%;
        text-align: center;
      }
      .font1 {
        background-image: url(../img/history/xia/dynasty.png);
        background-size: 130%;
        background-position: 40% 50%;
      }
      .font2 {
        background-image: url(../img/history/zhanguo/dynasty.png);
        background-size: 140%;
        background-position: 50% -20%;
      }
      .font3 {
        background-image: url(../img/history/wei/dynasty.png);
        background-size: 120%;
        background-position: 40% 72%;
      }
      .font4 {
        background-image: url(../img/history/han/dynasty.png);
        background-size: 130%;
        background-position: 45% 50%;
      }
      .font5 {
        background-image: url(../img/history/tang/dynasty.png);
        background-size: 130%;
        background-position: 50% 47%;
      }
      .font6 {
        background-image: url(../img/history/song/dynasty.png);
        background-size: 150%;
        background-position: 50% 100%;
      }
      .font7 {
        background-image: url(../img/history/ming/dynasty.png);
        background-size: 120%;
        background-position: 50% 60%;
      }

      .cardfont p {
        position: absolute;
        bottom: 4%;
        left: 50%;
        transform: translateX(-50%);
        color: #8d917f;
        font-size: 1.6em;
        background-color: #feefaa;
        border: 3px solid #ec8d5f;
        letter-spacing: 0.01em;
        border-radius: 25%;

        font-family: font3;
      }

      .cardbac .shan {
        width: 24%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan > img {
        width: 120%;
        height: 75%;
        transform: translateY(7%);
      }

      .cardbac .shan2 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan2 > img {
        width: 150%;
        height: 70%;
      }
      .cardbac .shan3 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan3 > img {
        width: 150%;
        height: 70%;
      }
      .cardbac .shan4 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan4 > img {
        width: 180%;
        height: 85%;
      }
      .cardbac .shan5 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-25%);
      }
      .cardbac .shan5 > img {
        width: 150%;
        height: 55%;
        transform: translateX(10%);
      }
      .cardbac .shan6 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan6 > img {
        width: 140%;
        height: 45%;
        transform: scale(1.3);
      }
      .cardbac .shan7 {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #824239; */
        animation: floatAnimation2 2s infinite ease-in-out;
        transform: translateX(-20%);
      }
      .cardbac .shan7 > img {
        width: 155%;
        height: 40%;
        transform: scale(1.3);
      }

      .cardbac .main-text {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 34%; */
        /* height: 100%; */
        /* 改 */
        background-image: url(../img/bac2.jpg);
        height: 85%;
        width: 75%;

        background-size: 230%;
        background-position: 40% 40%;
        border: 2px solid #ec8d5f;
        /* 结 */
        transform: translateX(15%) translateY(10%);
        border-radius: 100%;
        background-color: #ec8d5f;
      }
      .cardbac .main-text .text-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 80%;
        /* 改 */
        width: 68%;
        height: 100%;

        transform: translateY(-4%);

        background-size: 100%;
        background-position: 100% 100%;
        /* 结 */
        /* background-color: #824239; */
      }

      .text-container > .shan-logo {
        width: 80%;
        height: 20%;

        /* 改 */

        padding-bottom: 3px;
        display: flex;
        border-bottom: 3px solid #721335;
        margin-top: 20px;
        justify-content: flex-start;
        align-items: flex-end;
      }
      .text-container > .shan-logo > img {
        width: 40%;
        height: 70%;
        /* background-color: #8f3536; */
      }
      .shan-text {
        display: flex;
        width: 130%;
        height: 100%;
        text-align: left;
        justify-content: center;

        align-items: flex-start;
        padding: 2px;
        font-family: font3;
        color: black;
        font-size: 1.3em;
      }
      .shan-text > span {
        width: 82%;
        padding: 3px;
        height: 80%;

        text-indent: 1.4em;
        display: inline-block;
        margin-top: 10px;
        word-wrap: break-word;
        align-items: center;
        line-height: 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        margin: 0 auto;
        margin-top: 5px;
        border: 2px solid #a9857b;
        background-color: #ece2d5;
      }
      .shan2-text > span {
        width: 82%;
        padding: 3px;
        height: 85%;
        text-indent: 1.5em;
        text-align: left;
        display: inline-block;

        word-wrap: break-word;
        line-height: 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        margin: 0 auto;
        margin-top: 5px;
        border: 2px solid #a9857b;
        background-color: #ece2d5;
      }
      .shan3-text > span {
        width: 82%;
        padding: 1px;
        height: 80%;
        text-indent: 1.5em;
        text-align: left;
        display: inline-block;

        word-wrap: break-word;
        line-height: 1em;
        display: inline-block;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        border: 2px solid #a9857b;
        background-color: #ece2d5;
      }

      .shan7-text {
        display: flex;
        width: 130%;
        height: 100%;
        text-align: left;
        justify-content: center;

        align-items: flex-start;
        padding: 2px;
        font-family: font3;
        color: black;
        font-size: 1.214em;
      }
      .cardbac .echart-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* 改 */
        transform: translateX(35%);
        z-index: 10;
        /*  */
        width: 44%;
        height: 100%;
        /* background-color: #feefaa; */
      }
      .cardbac .echart-box .ec-top {
        display: flex;
        width: 100%;
        height: 50%;

        transform: translateX(10%) translateY(5%);
        /* background-color: #824239; */
        margin-bottom: 15px;
      }

      .cardbac .echart-box .ec-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        height: 60%;
        transform: translateX(10%);
        /* background-color: #a9857b; */
      }

      .cardbac3 {
        transform: rotateY(180deg) translateX(25%) translateY(-10%); /* 翻转回去 */
        z-index: 10;
      }

      /* 提示 */
      .tips {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 35%;
        height: 14%;
        overflow: hidden;
        /* background-color: #721335; */
        font-family: font3;
        /* background-color: #721335; */
        color: #e4956a;
        left: 50%;
        font-size: 1.1em;
        transform: translateX(-50%);
        bottom: 10px;
        animation: floatAnimation 2s infinite ease-in-out;
      }

      @keyframes floatAnimation {
        0% {
          transform: translateX(-50%) translateY(0);
        }
        50% {
          transform: translateX(-50%) translateY(-7px);
        }
        100% {
          transform: translateX(-50%) translateY(0);
        }
      }
      @keyframes floatAnimation2 {
        0% {
          transform: translateX(-25%) translateY(0);
        }
        50% {
          transform: translateX(-25%) translateY(-3px);
        }
        100% {
          transform: translateX(-25%) translateY(0);
        }
      }

      .tips > span {
        transition: all 0.5s ease;
        font-size: 2em;
        opacity: 0;
      }
      .tips > span.deActive {
        opacity: 1;
      }
      .tips > span:nth-child(2) {
        transform: translateY(-100%);
      }
      /* 翻转卡片结束 */

      .trigger1 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 100%;
        /* background-color: #721335; */
        z-index: 4;
        display: block;
      }

      .trigger2 {
        position: absolute;
        width: 130%;
        height: 110%;
        top: 24%;
        left: 0;
        background-color: #ece2d5;
        border: 1px solid #721335;
        transform: translateX(-10%) translateY(-20%);
        z-index: 100;
        transition: all 0.5s ease;
        scale: 0.1;
        opacity: 0;
      }
      /* 人物 */
      .people {
        position: absolute;
        display: flex;
        background-image: url(../img/people/精灵-0.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20%;
        height: 50%;
        max-width: 391px;
        max-height: 350px;
        bottom: 2%;
        left: 2%;
        opacity: 0.6;
        transition: all 0.5s ease;
      }
      .people.active {
        opacity: 0.6;
      }
      /* 竹子 */
      .zuzi {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 73% 100%;
        transform: rotate(10deg) translateX(10%);
        z-index: 3;
      }
      .zuzi2 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 210% 120%;
        background-position: 95% 100%;
        transform: rotate(-24deg);
        z-index: 3;
      }
      .zuzi3 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 85% 100%;
        transform: rotate(0deg);
        z-index: 3;
      }
      /* 切换按钮 */
      .lef-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        left: 0;
        transform: rotate(50deg) translateX(-60%);
        top: 33%;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s ease;
      }
      .lef-btn > img {
        width: 100%;
      }
      .lef-btn:hover {
        opacity: 1;
      }
      .right-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        right: 0;
        transform: rotate(-65deg) translateY(40%);
        z-index: 10;
        top: 35%;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s ease;
      }
      .right-btn > img {
        width: 100%;
      }
      .right-btn:hover {
        opacity: 1;
      }

      /* 鼠标跟随 */
      #follower {
        position: absolute;
        z-index: 999;
        transition: transform 0.1s ease;
        width: 20px;
        height: 20px;

        background-color: rgba(212, 38, 38, 0.4);
        position: absolute;
        border-radius: 50%; /* 将方形 div 变成圆形 */
        pointer-events: none;
      }

      /* 三维按钮 */
      .showThree {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 10%;
        /* background-color: #7e2224; */
        background-image: url(../img/anniu2.png);
        background-size: 90%;
        background-position: 50% 40%;
        background-repeat: no-repeat;
        font-family: font3;
        font-size: 1.2em;
        bottom: 10%;
        cursor: pointer;
        left: 50%;
        color: #721335;
        transform: translateX(-50%);
        /* color: #7e2224; */
        z-index: 10;
      }
      .showThree1 {
        left: 51%;
      }
      .showThree2 {
        left: 50%;
        bottom: 8.5%;
      }

      /* 三维 */
      .shanwei {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: #83a795; */
        /* transform: translateX(-50%) translateY(-53%); */
        /* border: 2px solid #7e2224; */
        transition: all 0.5s ease;
        /* background-color: #789a89; */
        /* scale: 0.3;
        opacity: 0; */
      }
      /* .shanwei.active {
        opacity: 1;
        scale: 1;
      } */
      .trigger2.active {
        opacity: 1;
        scale: 1;
      }
      .three-box {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        /* background-color: #e89bb6; */
      }
      .closeThree {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: font3;
        font-size: 1.6em;
        cursor: pointer;
        width: 30%;
        height: 10%;
        transition: all 0.5s ease;
        color: #789a89;
        transform: translateY(-40%);
        /* background-color: #e4956a; */
      }
      .closeThree:hover {
        color: #721335;
      }
      /* 按钮 */
      .right-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
      .right-arr {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        position: absolute;
        z-index: 10;
        left: 7%;
        opacity: 0;
        top: 9%;
        transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
        cursor: pointer;
        transition: all 0.5s ease;
      }
      .left-btn {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        top: 10%;
        transform: scaleX(100%) scaleY(70%);
        position: absolute;
        cursor: pointer;
        opacity: 0;
        transition: all 0.5s ease;
      }
      .lef-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="box-container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"></div>
          <div class="title">
            <span>历史沿革</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li><a href="./introduce.html">初识</a></li>
            <li class="active"><a href="./history.html">远溯</a></li>
            <li><a href="./kind.html">览境</a></li>
            <li><a href="./structure.html">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="shell">
          <div class="content">
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font1">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>夏朝与殷商</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree1">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan1">
                    <img src="../img/history/xia/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/xia/logo.png" alt="" />
                      </div>
                      <div class="shan-text">
                        <span>
                          五明扇是古代仪仗中用的一种掌扇,只限于帝王使用,由侍从持之扇柄较长，它象征权威的礼仪用器，是帝王“求贤自辅”的象征性信物。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font2">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>战国</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree2">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan2">
                    <img src="../img/history/zhanguo/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/zhanguo/logo.png" alt="" />
                      </div>
                      <div class="shan-text shan2-text">
                        <span>
                          战国时期出现团扇的雏形“便面”，形如半规，又名“户扇”以细竹篾为材。当时的“便面”为单面扇，为便于使用，后扇柄改为中间，扇面两边对称。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font3">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>魏晋南北朝</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree3">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan3">
                    <img src="../img/history/wei/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/wei/logo.png" alt="" />
                      </div>
                      <div class="shan-text shan3-text">
                        <span>
                          夏季来临人们把丹鹊脱落的翎毛制成扇子，时人称之为“条融”或“灰影”,据此创造了"扇"字，"户"下从"羽",即为"扇”。羽扇至今已有已有2000多年历史。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font4">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>汉朝</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree4">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan4">
                    <img src="../img/history/han/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/han/logo.png" alt="" />
                      </div>
                      <div class="shan-text">
                        <span>
                          在汉朝时期，团扇就已经有了较为广泛的使用，不仅是一种实用工具，用于遮阳、扇风，还是一种装饰品和礼仪用品。团扇常被用作礼物，表示敬意与友好。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font5">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>唐朝</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree5">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan5">
                    <img src="../img/history/tang/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/tang/logo.png" alt="" />
                      </div>
                      <div class="shan-text">
                        <span>
                          唐代,手工业的发达与商品经济的繁荣，使得团扇行业得到了迅猛发展，团扇在唐代的诗歌中出现频率较高，这也从侧面反映了团扇在唐代的盛况。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font6">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>宋朝</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree6">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan6">
                    <img src="../img/history/song/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/song/logo.png" alt="" />
                      </div>
                      <div class="shan-text">
                        <span>
                          宋代是团扇历史发展的鼎盛时期，在已出版的《宋画全集》七卷中，除第四卷，全书共收录绘画作品
                          877 幅，团扇作品就有 251 幅。扇面多为山水画配诗句。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="cardbox">
                <div class="cardfont font7">
                  <div class="trigger1"></div>
                  <div class="sun"></div>
                  <p>明朝</p>
                </div>
                <div class="cardbac cardbac1">
                  <div class="showThree showThree7">查看实例</div>
                  <div class="trigger2">
                    <div class="three-box">
                      <div class="shanwei"></div>
                      <div class="closeThree">点击此处退出</div>
                    </div>
                  </div>
                  <div class="shan shan7">
                    <img src="../img/history/ming/shan.png" alt="" />
                  </div>
                  <div class="main-text">
                    <div class="text-container">
                      <div class="shan-logo">
                        <img src="../img/history/ming/logo.png" alt="" />
                      </div>
                      <div class="shan-text shan7-text">
                        <span>
                          明朝团扇开始没落，折扇出现。明代宫廷中，扇面一面书写诗词文句，另一面绘上工致画图的习尚盛行。文人雅士学着互赠题诗词字折扇，表情达意。手持折扇，成为当时生活中高雅的象征。
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="echart-box">
                    <div class="ec-top"></div>
                    <div class="ec-bottom"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="tips">
          <span class="deActive">滚动查看朝代,鼠标悬浮了解更多</span>
        </div>
        <!-- people -->
        <div class="people active"></div>
        <!-- 这里吧右下角的竹子去了 -->
        <div class="zuzi"></div>
        <div class="zuzi2"></div>
        <div class="zuzi3"></div>
        <div class="lef-btn">
          <img src="../img/last-btn.png" alt="" />
          <img class="left-btn" src="../img/left-btn.svg" alt="" />
        </div>
        <div class="right-btn">
          <img src="../img/next-6-btn.png" alt="" />
          <img class="right-arr" src="../img/left-btn.svg" alt="" />
        </div>
      </div>
      <audio id="audio" loop>
        <source src="../audio/bacmusic3.MP3" />
      </audio>
      <audio id="language">
        <source src="../audio/history.mp3" />
      </audio>
    </div>
  </body>
</html>

<script src="../js/echart.min.js"></script>
<script src="../js/sanwei.js/three.min.js"></script>
<script src="../js/sanwei.js/GLTFLoader.js"></script>
<script src="../js/sanwei.js/OrbitControls.js"></script>

<script>
  (() => {
    window.onload = () => {
      // initBody();
      openSanwei();
      sanwei();
      initBanner();
      trigger();
      btn();
      initEchartBottom(0);
      initEchartTop();
      people();
      initFollow();
      hidOthers();
      initRoute();
      player();
      loclaMusic();
    };
  })();

  // 三维
  function openSanwei() {
    var showIndex;
    let showBtns = document.querySelectorAll(".showThree");
    let closeBtns = document.querySelectorAll(".closeThree");
    let trigger2 = document.querySelectorAll(".trigger2");
    let tips = document.querySelectorAll(".tips");
    trigger2.forEach((trigger) => {
      trigger.addEventListener("wheel", function (event) {
        event.stopPropagation();
      });
    });
    showBtns.forEach((showBtn, index) => {
      showBtn.addEventListener("click", () => {
        // showIndex = index;
        // let container = document.querySelectorAll(".shanwei")[index];
        // sanwei(container, index);
        trigger2.forEach((trigger) => {
          trigger.classList.add("active");
          // // 获取容器元素
        });
        tips.forEach((item) => {
          item.style.display = "none";
        });
      });
    });

    closeBtns.forEach((closeBtn) => {
      closeBtn.addEventListener("click", () => {
        trigger2.forEach((trigger) => {
          trigger.classList.remove("active");
        });
        tips.forEach((item) => {
          item.style.display = "flex";
        });
      });
    });
  }

  function createSanwei(container, index) {
    // 创建场景
    let scene = new THREE.Scene();

    // 创建相机
    let camera = new THREE.PerspectiveCamera(
      75,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
    );
    camera.position.z = 0.9;

    // 调整相机的视角

    camera.updateProjectionMatrix(); // 更新相机的投影矩阵以应用更改
    // 创建渲染器
    let renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor(0x00000000, 0); // 设置透明颜色

    renderer.setSize(container.clientWidth, container.clientHeight); // 设置渲染器的大小为容器的大小
    container.appendChild(renderer.domElement);
    // 加载器
    let loader = new THREE.GLTFLoader();

    // 加载GLB模型../models/
    loader.load(`../models/${index}.glb`, function (gltf) {
      // 计算模型的包围盒
      let bbox = new THREE.Box3().setFromObject(gltf.scene);
      let center = bbox.getCenter(new THREE.Vector3());

      gltf.scene.position.sub(center); // 将模型居中

      if (index == 1) {
        camera.position.z = 80;
      }
      scene.add(gltf.scene);
    });

    // 添加环境光
    let ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
    scene.add(ambientLight);

    // 添加平行光
    let directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
    directionalLight.position.set(0, 1, 0);
    scene.add(directionalLight);

    // 添加控制器
    let controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    animate();

    // 当窗口大小变化时，更新相机和渲染器大小
    window.addEventListener("resize", function () {
      let width = container.clientWidth;
      let height = container.clientHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    });
  }

  function sanwei(container, index) {
    // // 获取容器元素
    let containers = document.querySelectorAll(".shanwei");

    containers.forEach((container, index) => {
      createSanwei(container, index);
    });
  }

  // 播放
  // 保存播放状态
  function loclaMusic() {
    const savedPlaybackState = localStorage.getItem("playbackState");

    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      audio.currentTime = playbackState.currentTime;

      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;

    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();
    });
    // 结束 给人透明

    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  function initBanner() {
    let content = document.querySelector(".content");
    let deg = 0;

    window.addEventListener("wheel", (e) => {
      if (e.deltaY > 0) {
        deg += 51.5;
      } else {
        deg -= 51.5;
      }
      content.style.transform = `rotateY(${deg}deg)`;
    });
  }
  let tip = 0;
  const mytips = document.querySelectorAll(".tips>span");
  mytips.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      if (tip == 1) {
        item.innerText = "滚动查看朝代,鼠标悬浮了解更多";
        tip = 0;
      }
    });
  });
  //   提示
  function tips() {
    if (tip == 0) {
      mytips.forEach((tip) => {
        tip.innerText = "移入此处退出";
      });
      tip = 1;
    } else {
      tip.innerText = "滚动查看朝代,鼠标悬浮了解更多";
    }
  }
  function initEchartBottom(current) {
    let chatBottomBox = document.querySelectorAll(".ec-bottom");

    let option;
    // 使用雷达图模块

    let data = [
      [
        {
          value: [4, 3, 3, 1, 1],
          name: "功能",
        },
      ],
      [
        {
          value: [1, 1, 3, 1, 3],
          name: "功能",
        },
      ],
      [
        {
          value: [1, 3, 4, 2, 3],
          name: "功能",
        },
      ],
      [
        {
          value: [1, 3, 3, 2, 3],
          name: "功能",
        },
      ],
      [
        {
          value: [1, 3, 4, 2, 3],
          name: "功能",
        },
      ],
      [
        {
          value: [1, 3, 2, 4, 2],
          name: "功能",
        },
      ],
      [
        {
          value: [3, 3, 2, 2, 1],
          name: "功能",
        },
      ],
    ];
    option = {
      title: {
        text: "功能",
        left: "-5px",
        top: "0",
      },
      textStyle: {
        fontFamily: "font3",
      },
      tooltip: {},

      radar: {
        splitNumber: 4,
        name: {
          textStyle: {
            color: "#a9857b",

            fontFamily: "font3",
          },
        },
        indicator: [
          { name: "身份地位", max: 4 },
          { name: "礼仪", max: 4 },
          { name: "降温避暑", max: 4 },
          { name: "艺术装饰", max: 4 },
          { name: "遮挡面容", max: 4 },
        ],
        radius: 46,
        center: ["50%", "50%"],
      },
      series: [
        {
          type: "radar",

          itemStyle: {
            normal: {
              color: "#a8bcd4",
            },
          },
          data: data[current] || data[0],
        },
      ],
    };

    let chatBottom = [];
    for (let i = 0; i < chatBottomBox.length; i++) {
      chatBottom[i] = echarts.init(chatBottomBox[i]);
      chatBottom[i].setOption(option);
    }
  }

  function initEchartTop(current) {
    let option;
    let chatTopBox = document.querySelectorAll(".ec-top");
    let data = [
      [
        { value: 0.1, itemStyle: { color: "#9d2933" }, name: "夏" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "战国" },
        { value: 0.1, itemStyle: { color: "#ee9370" }, name: "魏晋" },

        { value: 0.2, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.2, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.2, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0.65, itemStyle: { color: "#ee9370" }, name: "战国" },
        { value: 0.6, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.2, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.1, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.05, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.05, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0.6, itemStyle: { color: "#ee9370" }, name: "战国" },
        { value: 0.65, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.4, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.35, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.2, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.15, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0, itemStyle: { color: "#ee9370" }, name: "战国" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.5, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.6, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.65, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0, itemStyle: { color: "#ee9370" }, name: "战国" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.5, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.6, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.65, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0, itemStyle: { color: "#ee9370" }, name: "战国" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.5, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.6, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.65, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.2, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
      [
        { value: 0, itemStyle: { color: "#9d2933" }, name: "夏 " },
        { value: 0, itemStyle: { color: "#ee9370" }, name: "战国 " },
        { value: 0, itemStyle: { color: "#fff5dc" }, name: "魏晋" },
        { value: 0.2, itemStyle: { color: "#edd69b" }, name: "汉" },

        { value: 0.2, itemStyle: { color: "#9d2933" }, name: "唐" },
        { value: 0.35, itemStyle: { color: "#ee9370" }, name: "宋" },
        { value: 0.6, itemStyle: { color: "#fff5dc" }, name: "明" },
      ],
    ];
    option = {
      title: [
        {
          text: "兴衰",
          left: "-7px",
          top: "1px",
          textStyle: {
            fontFamily: "font3",
          },
        },
      ],
      textStyle: {
        fontSize: 9,
        fontFamily: "font3",
      },
      grid: {
        containLabel: true,
        left: 20,
      },
      polar: {
        width: "100px",

        radius: [25, "65%"],
      },
      angleAxis: {
        max: 0.7,
        startAngle: 75,
      },
      radiusAxis: {
        type: "category",
        data: ["夏", "战国", "战国", "汉", "唐", "宋", "明"],
      },
      tooltip: {},
      series: {
        type: "bar",

        radious: ["10%", "65%"],
        data: data[current],
        coordinateSystem: "polar",
        label: {
          show: false,
          position: "middle",
          formatter: function (params) {
            return params.name + ":" + params.value * 100 + "%";
          },
          textStyle: {
            fontSize: 10,
            fontFamily: "font3",
          },
        },
      },
    };

    let chatTop = [];
    for (let i = 0; i < chatTopBox.length; i++) {
      chatTop[i] = echarts.init(chatTopBox[i]);
      chatTop[i].setOption(option);
    }
  }
  function people() {
    // 眨眼
    const people = document.querySelector(".people");
    let blank_index = 0;
    timeout = 4000;
    let blink = () => {
      if (blank_index == 2) {
        blank_index = 0;
        timeout = 4000;
      } else {
        blank_index += 1;
        timeout = 40;
      }
      people.style.backgroundImage = `url(../img/people/精灵-${blank_index}.png)`;
      setTimeout(() => {
        blink();
      }, timeout);
    };
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 1) {
        li.addEventListener("mouseover", () => {
          lis[1].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[1].classList.add("active");
        });
      }
    });
  }

  // 开始即眨眼
  var current;
  //   移上隐藏
  function hidOthers() {
    const items = document.querySelectorAll(".item");
    items.forEach((item, index) => {
      item.addEventListener("mouseover", function () {
        this.classList.remove("deActive");
        current = index;
        items.forEach((otherItem) => {
          if (otherItem !== this) {
            otherItem.classList.add("deActive");
          }
        });
      });
      item.addEventListener("mouseout", function () {
        items.forEach((otherItem) => {
          otherItem.classList.remove("deActive");
        });
      });
    });
  }

  function btn() {
    const leftBtn = document.querySelector(".lef-btn");

    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "./means.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "./kind.html";
    });
  }

  function trigger() {
    const trigger1s = document.querySelectorAll(".trigger1");
    const trigger2s = document.querySelectorAll(".trigger2");
    let nowindex;
    trigger1s.forEach((trigger, index) => {
      trigger.addEventListener("mouseenter", () => {
        tips();
        initEchartBottom(current);
        initEchartTop(current);
      });
    });

    // trigger2s.forEach((trigger) => {
    //   trigger.addEventListener("mouseleave", () => {
    //     tips();
    //   });
    // });
  }

  function initBody() {
    const main = document.querySelector(".main");
    main.style.opacity = "1";
  }

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 3000);
  }
</script>
